<template>
  <div>
    <el-popover placement="right" width="400"  v-model="dialogDay"  trigger="manual">
    <div>
<div style="text-align:right;cursor: pointer;">    <span @click="dialogDay = !dialogDay" class="icon-guanbi iconfont"></span></div>
        <calendar
        class="calendar"
        v-on:choseDay="clickDay"
        :markDateMore="arr"
        agoDayHide="1609459200"
        v-on:changeMonth="changeDate"
        :futureDayHide="futureDayHide"
      ></calendar>
    </div>
      <el-button slot="reference" @click="dialogDay = !dialogDay">{{name}}</el-button>
    </el-popover>
  </div>
</template>
<script>
import { findState } from "@/api/modules/enterprise";
import Calendar from "vue-calendar-component";
export default {
  // props:[],
  // 页面加载
  props: {
    classify: {
      type: String,
      default: 1,
    },
    name:{
      type:String,
      default: "",
    }
  },
  created() {
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      //   clickDay: "2022-01-24",
      // arr:['2022/01/22','2022/01/20'],
      arr: [
        // { date: "2022/01/20", className: "red_calendar" },
        //  {
        //   date: "2022/01/22",
        //   className: "red_calendar",
        //   list: [],
        // },
      ],
      dialogDay: false,
      futureDayHide: ` ${new Date().getTime() / 1000}`,
      query: {
        unitId: sessionStorage.getItem("interpretation"),
        year: new Date().getFullYear(),
      },
    };
  },
  // 方法
  methods: {
    changeDate(data) {
       // 跳到了本月
      let date=data.substring(0,4)
      if(this.query.year!=date&&date<=new Date().getFullYear()&&date>=2021){
                this.query.year=date
                   this.getList();
      }
    },
    getList() {
      findState({ classify: this.classify, ...this.query }).then((res) => {
        switch (this.classify) {
          case "6":
            this.arr = res.data.map((x) => ({
              date: x.taskDate,
              className: x.taskStatus,
              data: x.unitCheckResultResCheckList,
            }));
            break;
              case "3":
            this.arr = res.data.map((x) => ({
              date: x.taskDate,
              className: x.taskStatus,
              data: x.unitCheckResultResSampleList,
            }));
            break;
             case "5":
            this.arr = res.data.map((x) => ({
              date: x.taskDate,
              className: x.taskStatus,
              data: x.unitCheckResultResTablewareList,
            }));
            break;
                case "4":
            this.arr = res.data.map((x) => ({
              date: x.taskDate,
              className: x.taskStatus,
              data: x.unitCheckResultResWasteList,
            }));
            break;
                   case "1":
            this.arr = res.data.map((x) => ({
              date: x.taskDate,
              className: x.taskStatus,
              data: x.unitCheckResultResList,
            }));
            break;
                   case "2":
            this.arr = res.data.map((x) => ({
              date: x.taskDate,
              className: x.taskStatus,
              data: x.unitCheckResultResWholeProjectList,
            }));
            break;
        case "7":
            this.arr = res.data.map((x) => ({
              date: x.taskDate,
              className: x.taskStatus,
              data: x.unitCheckResultResToEatList,
            }));
            break;
          default:
            break;
        }
      });
    },
    clickDay(params) {
      let data = this.arr.filter((x) => x.date == params)[0];
      if (data && data.className == "green_calendar") {
        this.$emit("view", data.data[0]);
      }
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    calendar: Calendar,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.calendar {
  /deep/ .gray_calendar {
    color: #000;
    // background-color: #ffd700;
  }
  /deep/ .red_calendar {
    color: #ff0000;
    // background-color: #ff0000;
  }
  /deep/ .green_calendar {
    color: #008000;
    // background-color: #008000;
  }
  // /deep/ .wh_isToday {
  //   border-radius: 0;
  //   // background: transparent;
  // }

  // /deep/ .wh_chose_day {
  //   border-radius: 0;
  // }
  /deep/ .wh_content_all{
    background-color:#fff;
   
    .wh_top_changge li,.wh_content_item{
 color: #000;
    }

    .wh_jiantou1,.wh_jiantou2{
 border-color: #ddd;
    }
  }
  .wh_item_date:hover{
    background-color:red;
    border-radius: 100%;
}

/deep/ .wh_content_item .wh_chose_day{
  background:transparent;
}
/deep/ .wh_item_date:hover{
    background:transparent;
 }
 /deep/ .wh_content_item .wh_isToday{
    background:transparent;
 }
}
</style>
